<template>
	<!-- 页面内容--个人中心页 -->
	<view class="part1">
		<customerheadVue></customerheadVue>
		<view class="P-2 flexcentercloumn" :style="{
			marginTop: navigateHeight ? (navigateHeight + 100) + 'rpx' : '100rpx'
		}">
			<image class="P-2-1" src="../../static/logo.png" mode=""></image>
			<view class="P-2-2 flexrowspacebetween">
				<image src="../../static/phoneicon.png" mode=""></image>
				<p class="phonenumber" v-if="currentlang=='es'">+ 52</p>
				<p class="phonenumber" v-else>+ 66</p>
				<p>{{phoneNum}}</p>
			</view>
		</view>
		<view class="P-3 flexcenter">
			<view class="container">
				<view class="section" @click="openlangPopup">
					<image class="icon" src="/static/ucentericon1.png"></image>
					<text class="title">{{$t('ucenter.lang')}}</text>
					<!-- <image class="arrow" src="/static/ucenteropen.png"></image> -->
				</view>
				<view class="section">
					<image class="icon" src="/static/ucentericon2.png"></image>
					<text class="title">{{$t('ucenter.feedback')}}</text>

					<image class="arrow" src="/static/ucenteropen.png"></image>
				</view>
				<view class="section" @click="fn2('creditReport')">
					<image class="icon" src="/static/ucentericon3.png"></image>
					<text class="title">{{$t('ucenter.creditreport')}}</text>
					<image class="arrow" src="/static/ucenteropen.png"></image>
				</view>
				<view class="section">
					<image class="icon" src="/static/ucentericon4.png"></image>
					<text class="title">{{$t('ucenter.version')}}</text>
					<text class="version">1.0.0</text>

				</view>
			</view>
		</view>

		<uni-popup ref="quitpopup" type="center" :animation="false" :is-mask-click="false">
			<view class="quitpopup">
				<p>
					{{$t('ucenter.quittips')}}
				</p>
				<view class="quit-btn flexrowspacebetween">
					<p @click="quitconfirm">{{$t('index.confirm')}}</p>
					<p @click="quitcancel">{{$t('index.cancel')}}</p>
				</view>
			</view>
		</uni-popup>
		<view class="P-1 flexrowspacebetween">
			<p @click="fn1()">{{$t('ucenter.quit')}}</p>
			<p @click="fn2('deleteInfo')">{{$t('ucenter.deleteinfo')}}</p>
		</view>
		<uni-popup ref="langpopup" type="center" :animation="false" :is-mask-click="false">
			<view class="langpopup">
				<p class="header">{{$t('index.Selectlanguage')}}</p>
				<view class="locale-item" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)">

					<view class="flexrowstart">
						<view class="text" style="padding: 30rpx;">{{item.text}}
							{{item.code}}
						</view>
						<image v-if="item.code == 'es'" style="width: 100rpx; height: 60rpx;"
							src="../../static/lang/moxige.png" mode=""></image>
						<image v-if="item.code == 'th'" style="width: 100rpx; height: 60rpx;"
							src="../../static/lang/taiguo.png"></image>
					</view>
					<image v-if="item.code == currentlang" style="width: 60rpx; height: 60rpx;"
						src="../../static/lang/bigchoose.png" mode="">
					</image>
					<image v-else style="width: 60rpx; height: 60rpx;" src="../../static/lang/bigchoosed.png" mode="">
					</image>
				</view>
				<view v-if="langCode=='es'" class="header flexrowspacearound">
					<p @click="confirmsetlang" class="btn">Confirmar</p>
					<p @click="cancelsetlang" class="btn">Cancelar</p>
				</view>
				<view v-else class="header flexrowspacearound">
					<p @click="confirmsetlang" class="btn">ยืนยัน</p>
					<p @click="cancelsetlang" class="btn">ยกเลิก</p>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import customerheadVue from '../../components/customerhead.vue';
	export default {
		data() {
			return {
				langCode: '',
				navigateHeight: '',
				phoneNum: '',
				currentlang: 'th',

			}
		},
		components: {
			customerheadVue
		},
		onTabItemTap(res) {
			console.log('个人中心导航栏', res);
			if (!uni.getStorageSync('userId')) {
				uni.navigateTo({
					url: '/pages/demo1/demo1',
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			}
		},
		onShow() {
			this.currentlang = uni.getLocale()
			this.langCode = uni.getLocale()
			this.phoneNum = uni.getStorageSync('phoneNo')
		},
		created() {
			this.navigateHeight = uni.getStorageSync('navigateHeight') || ""
		},
		computed: {
			locales() {
				return [{
						text: this.$t('locale.es'),
						code: 'es'
					},
					{
						text: this.$t('locale.th'),
						code: 'th'
					},
				]
			}
		},
		methods: {
			cancelsetlang() {
				this.currentlang = uni.getLocale()
				this.$refs.langpopup.close()
			},
			confirmsetlang() {
				if (uni.getSystemInfoSync().platform.toLowerCase() === 'android') {
					this.setAppLocale(this.langCode);
					this.currentlang = this.langCode;
					this.$refs.langpopup.close()
				} else {
					this.setAppLocale(this.langCode);
				}
			},
			openlangPopup() {
				this.langCode = this.currentlang
				this.$refs.langpopup.open('bottom');
			},
			onLocaleChange(item) {
				this.langCode = item.code;
				this.currentlang = this.langCode;
				console.log('用户选择语言:', this.langCode);
			},
			setAppLocale(langCode) {
				uni.setLocale(langCode);
				this.$i18n.locale = langCode;
				this.currentlang = langCode;

			},
			fn1() {
				this.$refs.quitpopup.open('center')
			},
			fn2(url) {
				uni.navigateTo({
					url: `/pages/finally/${url}`,
					animationType: 'slide-in-right',
					animationDuration: 200
				})
			},
			quitcancel() {
				this.$refs.quitpopup.close()
			},
			quitconfirm() {
				uni.removeStorageSync('kjxy')
				uni.removeStorageSync('appSsid')
				uni.removeStorageSync('userId')
				uni.removeStorageSync('token')
				uni.removeStorageSync('newUser')
				uni.removeStorageSync('phoneNo')
				this.$refs.quitpopup.close()
				// #ifdef APP-PLUS
				plus.runtime.quit();
				// #endif

				// #ifdef H5
				uni.navigateTo({
					url: '/pages/demo1/demo1',
					animationType: 'slide-in-right',
					animationDuration: 200
				})
				// #endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.flexrowspacearound {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.quitpopup {
		width: 80vw;
		height: fit-content;
		padding: 40rpx;
		box-sizing: border-box;
		background-color: #fff;
		color: #222;
		border-radius: 30rpx;

		.quit-btn p {
			width: 44%;
			text-align: center;
			padding: 14rpx 10rpx;
			border-radius: 30rpx;
			border: 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;
			margin-top: 30rpx;
		}

		.quit-btn p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}

		.quit-btn p:nth-child(1) {
			background-color: #B6B6B6;
		}

		.quit-btn p:nth-child(2) {
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			background: linear-gradient(to right, #7F7FD5, #86A8E7);
			color: #fff;
		}

	}


	.flexrowspacebetween {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.flexrowstart {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexcentercloumn {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		flex-direction: column;
	}

	.flexcenter {
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.P-2 {
		margin: 50rpx 30rpx;

		.P-2-1 {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}

		.P-2-2 {
			image {
				width: 30rpx;
				height: 50rpx;
			}

			.phonenumber {
				margin: 50rpx 20rpx;
			}
		}

	}

	.P-1 {
		margin: 40rpx 30rpx;
		box-sizing: border-box;

		p {
			width: fit-content;
			height: 100rpx;
			background-color: #D9D9D9;
			text-align: center;
			color: #000;
			line-height: 100rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			padding: 0rpx 20rpx;
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.2);
			transition: all 0.2s;

		}

		p:active {
			transform: scale(0.96);
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		}


	}

	.part1 {
		min-height: 100vh;
		width: 100vw;
		background-color: #151718;
		color: #fff;
		display: flow-root;
		background-image: url('/static/ucenterbng.png');
		background-repeat: no-repeat;
		background-size: 100% 40%;



		.one {
			background-color: rgb(215, 215, 215);
			width: 100%;
			height: 60px;
			text-align: center;
			line-height: 60px;

			font-size: 25px;
			justify-content: center;
			display: flex;
		}

		.one image {
			width: 30px;
			height: 30px;
			margin-left: 60%;

		}

		.P-3 {
			width: 100%;
		}

		.container {
			padding: 20px;
			background-color: rgba(57, 58, 61, 1);
			border-radius: 20px;
			width: 76%;
			margin-top: 10px;
			color: #D8D8D8;
		}

		.section {
			display: flex;
			align-items: center;
			padding: 20px 0;
			border-bottom: 1rpx solid #eee;
		}

		.icon {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}

		.title {
			flex: 1;
			font-size: 16px;
		}

		.version {
			font-size: 14px;
		}

		.arrow {
			width: 10px;
			height: 18px;
		}


	}

	.langpopup {
		width: 100vw;
		box-sizing: border-box;
		padding: 40rpx;
		border-radius: 40rpx 40rpx 0 0;
		position: relative;
		color: #333;
		background-color: #ffffff;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
		padding-bottom: 80rpx;

		.header {
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 30rpx;
			color: #222;

			.btn {
				background: linear-gradient(to right, #7F7FD5, #86A8E7);
				width: 180rpx;
				color: #fff;
				padding: 16rpx 30rpx;
				border-radius: 50rpx;
				transition: all 0.2s;
				text-align: center;
				margin: 0 auto;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
				margin-top: 30rpx;
			}

			.btn:active {
				transform: scale(0.95);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
			}
		}

		.locale-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;

			.text {
				font-size: 28rpx;
				color: #555;
				width: 160rpx;
			}
		}

		.locale-item:last-child {
			border-bottom: none;
		}
	}
</style>